<template>
  <div class="copyright-registration">
    <ServiceNav />
    
    <!-- Banner区域 -->
    <div class="banner">
      <div class="banner-content container">
        <h1 class="banner-title">版权登记</h1>
        <p class="banner-desc">官方行政确权通道，为您的作品"上户口"！</p>
        <div class="banner-actions">
          <el-button type="primary" size="large" @click="handleRegister">立即登记</el-button>
          <el-button class="btn-details" size="large" @click="handleLearnMore">了解详情</el-button>
        </div>
      </div>
    </div>
    
    <!-- 优势介绍 -->
    <div class="features">
      <div class="container">
        <div class="features-grid">
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon :size="48"><Trophy /></el-icon>
            </div>
            <h3 class="feature-title">官方渠道</h3>
            <p class="feature-desc">由国家版权局或属地省版权局发证</p>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon :size="48"><Money /></el-icon>
            </div>
            <h3 class="feature-title">价值保障</h3>
            <p class="feature-desc">确保版权贸易过程顺利进行</p>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon :size="48"><Lock /></el-icon>
            </div>
            <h3 class="feature-title">权利保障</h3>
            <p class="feature-desc">为作品提供完整的法律保护</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 登记流程 -->
    <div class="process">
      <div class="container">
        <h2 class="section-title">登记流程</h2>
        <el-steps :active="1" finish-status="success" align-center>
          <el-step title="提交材料" description="上传作品及相关证明材料"></el-step>
          <el-step title="审核确认" description="专业人员审核作品信息"></el-step>
          <el-step title="缴费确认" description="缴纳登记费用"></el-step>
          <el-step title="获取证书" description="取得官方版权登记证书"></el-step>
        </el-steps>
      </div>
    </div>
    
    <!-- 作品上传 -->
    <div class="upload-section">
      <div class="container">
        <h2 class="section-title">作品上传</h2>
        <p class="section-desc">请上传您需要登记的作品及相关证明材料</p>
        
        <el-form :model="registrationForm" label-width="100px">
          <el-form-item label="作品名称">
            <el-input v-model="registrationForm.title" placeholder="请输入作品名称"></el-input>
          </el-form-item>
          
          <el-form-item label="作品类型">
            <el-select v-model="registrationForm.type" placeholder="请选择作品类型">
              <el-option label="文字作品" value="text"></el-option>
              <el-option label="美术作品" value="art"></el-option>
              <el-option label="摄影作品" value="photo"></el-option>
              <el-option label="音乐作品" value="music"></el-option>
              <el-option label="视频作品" value="video"></el-option>
              <el-option label="其他" value="other"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="作品文件">
            <el-upload
              class="upload-demo"
              drag
              action="/api/upload"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-exceed="handleExceed"
              :file-list="registrationForm.fileList"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持jpg/png/pdf/doc等格式文件，单个文件不超过50MB
                </div>
              </template>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="版权声明">
            <el-checkbox v-model="registrationForm.agreement">
              我已阅读并同意
              <el-button type="text" @click="showAgreement">《版权登记协议》</el-button>
              和
              <el-button type="text" @click="showTerms">《上传协议》</el-button>
            </el-checkbox>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitRegistration">提交登记</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div class="faq-section">
      <div class="container">
        <h2 class="section-title">常见问题</h2>
        
        <el-collapse accordion>
          <el-collapse-item title="版权登记与版权存证有什么区别？" name="1">
            <div>
              版权登记是国家版权局或地方版权局进行的行政确权，具有官方认证效力。
              版权存证是通过技术手段对作品进行固化，提供作品创作完成时间、创作过程等证明。
              两者在司法程序中的证明效力不同，版权登记通常具有更高的证明效力。
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="版权登记需要多长时间？" name="2">
            <div>
              一般情况下，版权登记流程需要15-20个工作日。加急服务可缩短至5-10个工作日，但需要支付额外费用。
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="版权登记的费用是多少？" name="3">
            <div>
              基础版权登记费用为300元/件，不同类型的作品费用可能略有差异。如需加急服务，需额外支付加急费用。
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="哪些作品可以进行版权登记？" name="4">
            <div>
              根据《著作权法》，文字作品、口述作品、音乐作品、戏剧作品、曲艺作品、舞蹈作品、美术作品、摄影作品、
              视听作品、工程设计图、产品设计图、地图、示意图、计算机软件等都可以进行版权登记。
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { UploadFilled, Trophy, Money, Lock } from '@element-plus/icons-vue';
import ServiceNav from '@/components/ServiceNav.vue';
import Footer from '@/components/Footer.vue';

export default defineComponent({
  name: 'CopyrightRegistration',
  
  components: {
    ServiceNav,
    Footer,
    UploadFilled,
    Trophy,
    Money,
    Lock
  },
  
  setup() {
    const registrationForm = reactive({
      title: '',
      type: '',
      fileList: [],
      agreement: false
    });
    
    const handleRegister = () => {
      document.querySelector('.upload-section').scrollIntoView({ 
        behavior: 'smooth' 
      });
    };
    
    const handleLearnMore = () => {
      document.querySelector('.features').scrollIntoView({ 
        behavior: 'smooth' 
      });
    };
    
    const showAgreement = () => {
      ElMessageBox.alert(
        '用户在进行版权登记时应保证提交的作品是自己创作或者获得合法授权的作品，并对作品的真实性负责。版权登记服务由斑马中国数字版权产业服务平台提供，平台将协助用户向国家版权局或地方版权局申请版权登记。',
        '版权登记协议',
        {
          confirmButtonText: '我已了解',
          type: 'info',
        }
      );
    };
    
    const showTerms = () => {
      ElMessageBox.alert(
        '禁止上传违反国家法律法规的内容，包括但不限于淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的内容。未经版权人授权许可，不得转载或上传。本网站对他人在网站上实施的侵权行为不承担法律责任，侵权的法律责任概由本人承担。',
        '上传协议',
        {
          confirmButtonText: '我已了解',
          type: 'warning',
        }
      );
    };
    
    const handlePreview = (file) => {
      console.log(file);
    };
    
    const handleRemove = (file, fileList) => {
      console.log(file, fileList);
    };
    
    const beforeRemove = (file) => {
      return ElMessageBox.confirm(
        `确定移除 ${file.name} 吗？`,
        '提示',
        {
          type: 'warning',
        }
      );
    };
    
    const handleExceed = (files, fileList) => {
      ElMessage.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    };
    
    const submitRegistration = () => {
      if (!registrationForm.title) {
        ElMessage.warning('请输入作品名称');
        return;
      }
      
      if (!registrationForm.type) {
        ElMessage.warning('请选择作品类型');
        return;
      }
      
      if (registrationForm.fileList.length === 0) {
        ElMessage.warning('请上传作品文件');
        return;
      }
      
      if (!registrationForm.agreement) {
        ElMessage.warning('请阅读并同意版权登记协议和上传协议');
        return;
      }
      
      ElMessage.success('登记申请提交成功，我们将尽快进行审核');
    };
    
    const resetForm = () => {
      registrationForm.title = '';
      registrationForm.type = '';
      registrationForm.fileList = [];
      registrationForm.agreement = false;
    };
    
    return {
      registrationForm,
      handleRegister,
      handleLearnMore,
      showAgreement,
      showTerms,
      handlePreview,
      handleRemove,
      beforeRemove,
      handleExceed,
      submitRegistration,
      resetForm
    };
  }
});
</script>

<style lang="scss" scoped>
.copyright-registration {
  min-height: 100vh;
}

.banner {
  height: 400px;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url('@/assets/images/copyright-bg.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  margin-top: 0px;
  
  &-content {
    color: $background-color-white;
    text-align: center;
  }
  
  &-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: $spacing-base;
  }
  
  &-desc {
    font-size: $font-size-large;
    margin-bottom: $spacing-extra-large;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  &-actions {
    display: flex;
    justify-content: center;
    gap: $spacing-large;
    
    .btn-details {
      background-color: transparent;
      border-color: $background-color-white;
      color: $background-color-white;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }

  }
}

.container {
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 $spacing-base;
}

.section-title {
  font-size: $font-size-extra-large;
  color: $text-primary;
  margin-bottom: $spacing-large;
  text-align: center;
}

.section-desc {
  font-size: $font-size-medium;
  color: $text-regular;
  margin-bottom: $spacing-extra-large;
  text-align: center;
}

.features {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  &-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-extra-large;
    
    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
    }
  }
}

.feature-item {
  text-align: center;
  
  &-icon {
    color: $primary-color;
    margin-bottom: $spacing-base;
  }
  
  &-title {
    font-size: $font-size-large;
    color: $text-primary;
    margin-bottom: $spacing-small;
  }
  
  &-desc {
    color: $text-regular;
    line-height: 1.6;
  }
}

.process {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
}

.upload-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .el-form {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .upload-demo {
    width: 100%;
  }
}

.faq-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .el-collapse {
    max-width: 800px;
    margin: 0 auto;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .banner {
    height: 300px;
    
    &-title {
      font-size: 36px;
    }
    
    &-desc {
      font-size: $font-size-medium;
    }
    
    &-actions {
      flex-direction: column;
      align-items: center;
      gap: $spacing-base;
    }
  }
  
  .section-title {
    font-size: $font-size-large;
  }
  
  .section-desc {
    font-size: $font-size-base;
  }
}
</style> 
 
 